<template>
  <TopNav title="预算控制"/>
  <div class="nutrition-budget-container">
    <!-- 预算设定区域 -->
    <div class="budget-setting">
      <h2>预算设定</h2>
      <el-input-number
          v-model="budget"
          :min="0"
          placeholder="输入预算金额"
          class="input-style"
      />
      <el-button
          type="success"
          @click="saveBudget"
          :disabled="!budget"
      >保存预算</el-button>
    </div>

    <!-- 支出记录区域 -->
    <div class="expense-tracking">
      <h2>支出记录</h2>
      <el-table
          :data="expenseRecords"
          style="width: 100%"
          :row-class-name="expenseTableRowClassName"
      >
        <el-table-column prop="product" label="产品名称" width="150"></el-table-column>
        <el-table-column prop="amount" label="支出金额" width="100">
          <template #default="{ row }">{{
              formatCurrency(row.amount)
            }}</template>
        </el-table-column>
        <el-table-column prop="date" label="日期" width="120">
          <template #default="{ row }">{{
              detaFormater(row.date)
            }}</template>
        </el-table-column>
      </el-table>

      <!-- 添加支出记录区域 -->
      <h3>添加支出记录</h3>
      <el-input
          v-model="newExpense.product"
          placeholder="产品名称"
          class="input-style"
      ></el-input>
      <el-input-number
          v-model="newExpense.amount"
          :min="0"
          placeholder="支出金额"
          class="input-style"
      />
      <el-date-picker
          v-model="newExpense.date"
          type="date"
          placeholder="选择日期"
          class="input-style"
      />
      <el-button
          type="primary"
          @click="addExpenseRecord"
          :disabled="!newExpense.product ||!newExpense.amount ||!newExpense.date"
      >添加记录</el-button>
    </div>

    <!-- 预算与支出对比区域 -->
    <div class="budget-vs-expense">
      <h2>预算与支出对比</h2>
      <div id="chart-container" style="width: 100%; height: 300px;"></div>
    </div>

    <!-- 预算剩余与超支提示 -->
    <div class="budget-status">
      <h2>预算状态</h2>
      <p v-if="budgetRemaining >= 0">剩余预算: {{ formatCurrency(budgetRemaining) }}</p>
      <p v-else class="over-budget-text">已超支: {{ formatCurrency(-budgetRemaining) }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch,computed  } from 'vue';
import * as echarts from 'echarts';
import TopNav from "@/components/TopNav/Back.vue"
import {detaFormater} from "@/utils/utils.js"
// 预算金额
const budget = ref(0);
// 支出记录数组
const expenseRecords = ref([
  { product: '蛋白粉', amount: 200, date: new Date('2024-01-05') },
  { product: '鱼油', amount: 150, date: new Date('2024-01-10') },
]);
// 新支出记录对象
const newExpense = ref({ product: '', amount: 0, date: new Date() });

// 计算预算剩余
const budgetRemaining = computed(() => {
  const totalExpense = expenseRecords.value.reduce((total, record) => total + record.amount, 0);
  return budget.value - totalExpense;
});

// 支出记录表格行样式类名
const expenseTableRowClassName = ({ rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return 'even-expense-row';
  } else {
    return 'odd-expense-row';
  }
};

// 货币格式化
const formatCurrency = (value) => {
  return `￥${value.toFixed(2)}`;
};

// 保存预算
const saveBudget = () => {
  if (budget.value > 0) {
    ElMessage.success('预算保存成功');
  } else {
    ElMessage.warning('请输入有效的预算金额');
  }
};

// 添加支出记录
const addExpenseRecord = () => {
  expenseRecords.value.push({...newExpense.value });
  newExpense.value = { product: '', amount: 0, date: new Date() };
  ElMessage.success('支出记录添加成功');
};

// 页面加载时初始化图表
onMounted(() => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = expenseRecords.value.map((record) => record.product);
  const yAxisData = expenseRecords.value.map((record) => record.amount);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: xAxisData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '支出金额',
        type: 'bar',
        data: yAxisData,
        barWidth: 20,
        itemStyle: {
          color: '#5cb85c'
        }
      }
    ]
  };

  myChart.setOption(option);
});

// 监听支出记录变化，更新图表
watch(expenseRecords, () => {
  const chartDom = document.getElementById('chart-container');
  const myChart = echarts.init(chartDom);
  const xAxisData = expenseRecords.value.map((record) => record.product);
  const yAxisData = expenseRecords.value.map((record) => record.amount);

  myChart.setOption({
    xAxis: {
      data: xAxisData
    },
    series: [
      {
        data: yAxisData
      }
    ]
  });
}, { deep: true });
</script>

<style scoped>
.nutrition-budget-container {
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 10px;
}
.page-title {
  color: #343a40;
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}
.budget-setting {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.expense-tracking {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.budget-vs-expense {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}
.budget-status {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}
.over-budget-text {
  color: #d9534f;
}
.input-style {
  width: 100%;
  margin-bottom: 10px;
}
h2 {
  color: #343a40;
  margin-bottom: 10px;
}
h3 {
  color: #343a40;
  margin-top: 20px;
  margin-bottom: 10px;
}
.el-table {
  margin-bottom: 20px;
}
.el-table th {
  background-color: #e9ecef;
  color: #343a40;
}
.el-table td {
  color: #343a40;
}
.even-expense-row {
  background-color: #f8f9fa;
}
.odd-expense-row {
  background-color: #fff;
}
#chart-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
